<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<canvas id="a" width="800" height="750" ></canvas>
<script>
var a=document.getElementById("a");
var ctx=a.getContext("2d");
/*ctx.beginPath();
ctx.strokeStyle="#000000";
ctx.strokeRect(20,20,150,100);
//放大缩小
ctx.scale(0.5,0.5);
ctx.beginPath();
ctx.strokeStyle="#cccccc";
ctx.strokeRect(20,20,150,100);*/

/*ctx.beginPath();
ctx.strokeStyle="#000000";
ctx.strokeRect(20,20,150,100);
//平移
ctx.translate(150,200);
ctx.beginPath();
ctx.strokeStyle="#cccccc";
ctx.strokeRect(20,20,150,100);*/

/*ctx.beginPath();
ctx.strokeStyle="#000000";
ctx.strokeRect(20,20,150,100);
旋转
ctx.translate(200,0);
ctx.rotate(30*Math.PI/180);
ctx.translate(-200,0);
ctx.beginPath();
ctx.strokeStyle="#cccccc";
ctx.strokeRect(20,20,150,100);*/

/*ctx.beginPath();
ctx.strokeStyle="#000000";
ctx.strokeRect(20,20,150,100);

ctx.transform(1,0,0,1,0,100);
ctx.beginPath();
ctx.strokeStyle="#cccccc";
ctx.strokeRect(20,20,150,100);*/
//变形
/*ctx.setTransform(130/150,-20/150,-20/100,80/100,0,0);
ctx.rect(50,50,100,50);
ctx.stroke();*/

/*var img=new Image();
img.src="xk.jpg";
img.onload=function(){
	ctx.save();
	ctx.beginPath();
	ctx.moveTo(80,0);
	ctx.lineTo(320,40);
	ctx.lineTo(0,200);	
	ctx.closePath();
	ctx.clip();
	ctx.setTransform((320-80)/240,40/240,-80/240,200/240,80,0);
	ctx.drawImage(img,0,0);
	ctx.restore();
	
	ctx.save();
	ctx.beginPath();
	ctx.moveTo(320,40);
	ctx.lineTo(0,200);
	ctx.lineTo(200,150);	
	ctx.closePath();
	ctx.clip();
	ctx.setTransform(200/240,(150-200)/240,(200-320)/240,(150-40)/240,0,200);
	ctx.drawImage(img,0,0-240);
	ctx.restore();
}*/

//颜色渐变
/*var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0.2,"#00ff00");
grd.addColorStop(0.8,"#ff0000");
ctx.fillStyle=grd;
ctx.fillRect(0,0,200,100);*/

//径向渐变
/*var grd=ctx.createRadialGradient(100,100,20,100,100,50);
grd.addColorStop(0,"#00ff00");
grd.addColorStop(1,"#ff0000");
ctx.fillStyle=grd;
ctx.fillRect(0,0,200,200);*/

/*ctx.fillStyle="#00ff00";
ctx.fillRect(10,10,50,50);
ctx.globalCompositeOperation="source-over";
ctx.beginPath();
ctx.fillStyle="#ff0000";
ctx.arc(50,50,30,0,2*Math.PI);
ctx.fill();*/

//颜色反转
/*var image=new Image();
image.src="xk.jpg";
image.onload=function(){
	ctx.drawImage(image,0,0);
	var imgdata=ctx.getImageData(0,0,250,250);	
	var px=imgdata.data;
	for(var i=0,n=px.length;i<n;i+=4){
		px[i]=255-px[i];
		px[i+1]=255-px[i+1];
		px[i+2]=255-px[i+2];
	}
	ctx.putImageData(imgdata,250,0);
}*/
//灰度控制
/*var image=new Image();
image.src="xk.jpg";
image.onload=function(){
	ctx.drawImage(image,0,0);
	var imgdata=ctx.getImageData(0,0,250,250);	
	var px=imgdata.data;
	for(var i=0,n=px.length;i<n;i+=4){
		var grayscale=px[i]*.3+px[i+1]*.59+px[i+2]*.11
		px[i]=grayscale;
		px[i+1]=grayscale;
		px[i+2]=grayscale;
	}
	ctx.putImageData(imgdata,250,0);
}*/
//阴影效果
ctx.shadowColor="#cccccc";
ctx.shadowBlur=10;
ctx.shadowOffsetX=20;
ctx.shadowOffsetY=30;
var img=new Image();
img.src="xk.jpg";
img.onload=function(){
	ctx.drawImage(img,0,0);	
}
/*if(a.getContext){
	var context=a.getContext("2d");
	context.fillStyle="rgb(255,0,0)";
	context.fillRect(20,30,64,36);
}*/
/*
ctx.moveTo(20,20);
ctx.lineTo(70,20);
ctx.arcTo(120,30,120,70,50);
ctx.lineTo(120,120);
ctx.stroke();*/

/*ctx.moveTo(40,20);
ctx.lineTo(100,20);
ctx.arcTo(120,20,120,40,20);
ctx.lineTo(120,70);
ctx.arcTo(120,90,100,90,20);
ctx.lineTo(40,90);
ctx.arcTo(20,90,20,70,20);
ctx.lineTo(20,40);
ctx.arcTo(20,20,40,20,20);
ctx.stroke();*/

/*ctx.fillStyle="background:#ff8800";
ctx.beginPath();
ctx.fillRect(10,10,200,100);
ctx.clearRect(30,30,50,50);*/

/*ctx.moveTo(100,100);
ctx.quadraticCurveTo(200,30,150,10);
ctx.stroke();*/

/*ctx.moveTo(100,50);
var cX1=20;
var cY1=50;
var cX2=200;
var cY2=180;
var endX=266;
var endY=188;
ctx.bezierCurveTo(cX1,cY1,cX2,cY2,endX,endY);
ctx.stroke();*/

/*ctx.arc(100,100,40,0,360*Math.PI/180,true);
ctx.clip();
ctx.beginPath();
ctx.fillStyle="background:#ffff00";
ctx.fillRect(50,60,100,160);*/

/*ctx.beginPath();
ctx.moveTo(100,150);
ctx.bezierCurveTo(50,100,100,0,150,50);
ctx.bezierCurveTo(200,0,250,100,200,150);
ctx.bezierCurveTo(250,200,200,300,150,250);
ctx.bezierCurveTo(100,300,50,200,100,150);
ctx.closePath();
ctx.moveTo(100,150);
ctx.lineTo(150,50);
ctx.lineTo(200,150);
ctx.lineTo(150,250);
ctx.lineTo(100,150);
ctx.strokeStyle="#ff0000";
ctx.stroke();*/

/*ctx.font="bold 30px Arial";
ctx.fillText("Hello world",100,50);
ctx.strokeText("Hello world",150,100);*/

/*var images=new Image();
images.src="xk.jpg";
ctx.drawImage(images,10,10);
ctx.drawImage(images,260,10,150,100);
ctx.drawImage(images,50,50,100,100,260,130,100,100);*/
</script>
<script>
/*window.addEventListener('load',function(){
	if(navigator.geolocation){
		navigator.geolocation.watchPosition(update);		
	}
},false);
function update(position){
	var lat=position.coords.latitude;
	var lng=position.coords.longitude;
	document.write('经度：'+lat+',纬度：'+lng);
}
localStorage.key='想要保存的值';
var hoge=localStorage.key;
document.write(hoge);*/
</script>
</body>
</html>
